<template>
    <h3 class="text-base font-bold  component-title">
        <!-- <img class="w-[24px] h-[24px]" :src="Icon" /> -->
        <div>{{ title }}</div>
        <div class="titleIntro">{{ tip }}</div>
    </h3>
    <div class="flex">
        <div class="flex-1"><el-slider :min="min"  :max="max" v-model="value" :step="step" /></div>
        <div class="sliderNumber">{{ value }}</div>
    </div>

</template>

<script setup lang="ts">
import Icon from '@/assets/images/drawing/icon_prompt.png'
import { useVModels } from '@vueuse/core';
const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelValue?: any,
        title?: string,
        tip?: string,
        min?: number
        max?:number,
        step?:number
    }>(),
    {
        modelValue: 0,
        title: '',
        tip: '',
        min: 0,
        max: 100,
        step:1,
    }
)
const { modelValue: value, title } = useVModels(props, emit)
</script>

<style lang="scss" scoped>
.component-title {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    height: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;

    .titleIntro {
        margin-left: 8px;
        height: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 10px;
        color: #616772;
        line-height: 12px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}

.length-suffix {
    position: absolute;
    bottom: 0;
    left: 0px;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    background:var(--el-bg-color-base);

}

.sliderNumber {
    background: #121318;
    width: 40px;
    height: 34px;
    margin-left: 10px;
    border-radius: 8px 8px 8px 8px;

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #616772;
    line-height: 34px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}
</style>
